<template>
  <div class="page-box">
    <el-image
      class="logo-img mt100"
      :src="url"
      fit="fill"></el-image>
    <div class="p-title mt20">{{ packageTitle }}</div>
    <div class="p-tag mt20">{{packageTime}}</div>
    <div v-if="systemType==='Unknown'" class="download-box mt20">
      <div class="db-size">请使用windows或者mac浏览器打开下载</div>
    </div>
    <div v-else class="download-box mt20">
      <div class="db-size">大小: {{ data.fileSize }}</div>
      <el-button type="primary" size="small" class="db-btn" @click="clickBtnDownload">下载</el-button>
    </div>
    <div class="log-title mt20">{{ data.versionTitle }}:</div>
    <div class="log-content mt20">{{data.versionNote}}</div>
  </div>
</template>
<script>
import request, { downloadFile } from '@/utils/request';

export default {
  data(){
    return{
      systemType:"Unknown",
      data:{},
    }
  },
  computed:{
    url(){
      return this.systemType==="Windows"?require("@/assets/images/Windows.svg"):require("@/assets/images/mac.svg")
    },
    packageTitle(){
      return this.systemType==="Windows"?`小蓝鲸 - windows批量处理 V ${this.data.versionNum}.exe`:`小蓝鲸 - Apple批量处理 V ${this.data.versionNum}.dmg`
    },
    packageTime(){
      return this.systemType==="Windows"?`${this.data.createTime} win桌面`:`${this.data.createTime} mac桌面`;
    }
  },
  mounted() {
    this.systemType = this.getOperatingSystem();

    if (this.systemType === "Windows"){
      this.requestDataDetail(1);
    }else if(this.systemType === "MacOS"){
      this.requestDataDetail(2);
    }
  },
  methods:{
    clickBtnDownload(){
      downloadFile(this.data.url,this.data.originalFileName);
    },
    //判断系统
    getOperatingSystem() {
      const userAgent = window.navigator.userAgent;
      if (userAgent.includes("Win")) return "Windows";
      if (userAgent.includes("Mac")) return "MacOS";
      return "Unknown";
    },

    //网络-查询: 最新指定系统最新信息
    requestDataDetail(platform){
      request({
        url:`/version_control/lastInfo`,
        method:'get',
        params: { platform:platform },
      }).then(response =>{
        this.data = response.data
      })
    },
  }
}

</script>

<style scoped>
.page-box{
  display: grid;
  place-items: center;
  width: 100%;
  height: 600px;
}
.logo-img{
  width: 100px;
  height: 100px;
  //margin-top: 100px;
}
.p-title{
  font-size: 18px;
  font-weight: 500;
}
.p-tag{
  font-size: 14px;
  color: #999999;
}
.download-box{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 50px;
  background-color: #E3E5E7;
  border-radius: 25px;
}
.db-size{
  font-size: 14px;
}
.db-btn{
  margin-left: 50px;
}
.log-title{
  font-size: 14px;
}
.log-content{
  font-size: 14px;
  white-space: pre-line;

}
.mt100{
  margin-top: 100px;
}
</style>
